<template>
  <el-pagination
    :hide-on-single-page="true"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="props.page"
    :page-sizes="[5, 20, 50, 100, 200, 500]"
    :page-size="props.limit"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
  />
</template>

<script lang="ts" setup>
const props = defineProps({
  page: { // 当前页面
    type: Number,
    default: 1
  },
  limit: { // 每页条数
    type: Number,
    default: 10
  },
  total: { // 总条数
    type: Number,
    default: 0
  },
  fn: { // 触发函数
    type: Function,
    default: () => {}
  }
})

// ts --- props使用方式
// interface PropsType {
//   page: number,
//   limit: number,
//   total: number,
//   fn: () => void
// }

// // withDefaults \\ 自带 (defineProps<PropsType>(), { 默认值 } ) 默认值 以下方式

// const props = withDefaults(defineProps<PropsType>(), {
//   page: 1,
//   limit: 10,
//   total: 0,
//   fn: () => {}
// })

// const props = defineProps<PropsType>()
// ts --- 使用方式结束

// ts ---- emit 使用方式

// interface EmitsType {
//   (e: 'update:page', page: number) : void
//   (e: 'update:limit', limit: number) : void
// }

// const emit = defineEmits<EmitsType>()

// const handleSizeChange = async (limit: number) => {
//   emit('update:page', 1)
//   emit('update:limit', limit)
//   props.fn()
// }

// const handleCurrentChange = async (page: number) => {
//   emit('update:page', page)
//   props.fn()
// }
// ts ---- emit 使用方式结束

const emit = defineEmits(['update:page', 'update:limit'])

const handleSizeChange = async (size: number) => {
  emit('update:page', 1)
  emit('update:limit', size)
  props.fn()
}

const handleCurrentChange = async (page: number) => {
  emit('update:page', page)
  props.fn()
}

</script>

<style lang="scss" scoped>
.el-pagination{
  display: flex;
  justify-content: flex-end;
  padding-top: 20px;
}
</style>
